<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>推箱子网页版</title>
<script src="../../../js/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script type="text/javascript" src="js/map.js"></script>
<script type="text/javascript" src="js/game.js"></script>
<style type="text/css">
ol,li,{
	margin: 0px;
	padding: 0px
}
</style>
<script type="text/javascript">
	function keydown(e) {
		if ( e.keyCode < 37 || e.keyCode > 40 ){
			return;
		}
		v.move(e.keyCode);
		// e.keyCode==37 && /*游戏左移*/ 	||
		// e.keyCode==38 && /*游戏上移*/ 		||
		// e.keyCode==39 && /*游戏右移*/ 	||
		// e.keyCode==40 && /*游戏下移*/;
		// // 判断当前关结束就进入下一关
	}
</script>
</head>
<body onkeydown="keydown(event)">
	<div id="main" style="padding: 20px;">
		<h1>推箱子网页版</h1>
		<div id="map" style="float: left">
			<div v-for="row in game.map" style="height: 30px">
				<img v-for=" i in row" :src="'imgs/'+i+'.GIF'">
			</div>
		</div>
		<div id="ctl" style="padding: 20px; float: left; text-align: center;">
			<h2>第1关</h2>
			<span>第0步</span><br>
			<br>
			<input placeholder="尊姓大名" style="width:96px;text-align: center">
			<br>
			<br>
			<button style="width: 100px">重新开始</button>
			<br>
			<br>
			<button style="width: 100px">保    存</button>
			<br>
			<br>
			<button style="width: 100px">加    载</button>
		</div>
		<div id="score" style="padding: 20px; float: left; text-align: center;">
			<h2>排名</h2>
			<ol>
				<li v-for=" user in scores[ game.getIndex() ] ">
					{{user.name}} : {{user.time}} 秒
				</li>
			</ol>
		</div>
	</div>
	<script>
		var v = new Vue({
			el : "#main",
			data : {
				game : null,
				// scores : [ [{name: "zs", time:12346},
				// 			{name: "ls", time:123}],... ]
				scores : [],
				time : 0   // 通关时间
			},
			// 事件钩子函数
			// created 在 vue 构建完成之后调用的函数
			// mounted 装载事件
			created(){
				// 读取游戏通关数据
				var json = localStorage.getItem("pushbox_scores");
				var scores = JSON.parse(json);
				if(scores){
					this.scores = scores;
				}

				this.game = new Game();
				this.game.next();
				// 记录游戏开始时间
				this.time = new Date();
			},
			methods:{
				move(keycode){
					if(keycode == 37){
						this.game.left();
					} else if(keycode == 38){
						this.game.up();
					} else if(keycode == 39){
						this.game.right();
					} else if(keycode == 40){
						this.game.down();
					} else {
						return;
					}
					// 强制刷新
					this.$forceUpdate();
					if (this.game.youWin()){
						// 延迟100毫秒, 显示结果, 让地图渲染完成
						setTimeout(()=>{
							alert("厉害!");
							// 关数  => scores 数组下标值
							var index = this.game.getIndex();
							// 获取通关用户数组
							var users = this.scores[index];
							// 判断该关时候有记录通关用户
							if(users == undefined){
								// 创建新用户数组
								users = [];
								this.scores[index] = users;
							}
							// 用户输入自己的名字
							var name = prompt("请输入你的名字");
							// 计算通关时间
							var time = new Date().getTime() - this.time.getTime();
							// 换算成秒
							time = parseInt(time / 1000);
							// 构建成绩对象
							var score = {
								name : name,
								time : time
							}
							// 数组添加元素
							users.push(score);
							// 将 对象 转成 json 字符串
							var json = JSON.stringify(this.scores);
							// 将成绩保存到 localStorage
							localStorage.setItem("pushbox_scores",json);
							this.game.next();
							// 记录游戏开始时间
							this.time = new Date();
						}, 100);

					}
				}
			}
		})
	</script>
</body>
</html>